<template>
  <div>
    <el-dialog
      v-dialogDrag
      class="dialogStyleTemplate"
      :title="dialogTitle"
      style="padding:0;"
      :visible.sync="dialogVisible"
      :before-close="cancel"
      :modal-append-to-body="false"
    >
      <el-row>
        <el-form :model="dialogFormData" label-width="80px">
          <el-col :span="24">
            <div class="title">
              {{ title }}
            </div>
          </el-col>
          <el-col :span="24">
            <div class="cont">
              {{ content }}
            </div>
          </el-col>
        </el-form>
      </el-row>
      <span v-if="msgType === '1'" slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancel">取 消</el-button>
        <el-button size="medium" type="primary" @click="cancel">确 定</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancel01">取 消</el-button>
        <el-button size="medium" type="primary" @click="submit">确 认</el-button>
      </span>
    </el-dialog>
    <!--取消 -->
    <addDialog ref="addDialog" />
  </div>
</template>

<script>
import { changeStatus } from '@/api/PersonalOffice/info'
// 取消
import addDialog from './addDialog.vue'
export default {
  name: 'MessageItem',
  components: {
    addDialog
  },
  data() {
    return {
      dialogTitle: '',
      dialogVisible: false,
      dialogFormData: {
        id: '',
        status: ''
        // receivers: ''
      },
      msgType: '',
      title: '',
      createTime: '',
      createName: '',
      content: '',
      receivers: ''
    }
  },
  methods: {
    openMessageItem(item) {
      // this.$emit('hide')
      this.title = item.title
      this.createTime = item.createTime
      this.createName = item.createName
      this.content = item.cont
      this.dialogFormData.id = item.id
      this.msgType = item.msgType
      this.receivers = item.receivers
      this.dialogFormData.status = '1'
      if (item.msgType === '1') {
        this.dialogTitle = '最新的公告通知'
      }
      if (item.msgType === '3') {
        this.dialogTitle = '选定的人员确认'
      }
      if (item.msgType === '4') {
        this.dialogTitle = '选定的单位确认'
      }
      if (item.msgType === '5') {
        this.dialogTitle = '分配的钻孔确认'
      }
      this.dialogVisible = true
    },
    // 对话框取消按钮
    cancel() {
      changeStatus(this.dialogFormData).then(resp => {
        if (resp) {
          this.$emit('childrenGetList')
          this.$emit('hide')
        }
      })
      this.dialogVisible = false
    },
    cancel01() {
      this.dialogVisible = false
      this.$refs.addDialog.handleAdd('取消原因')
    },
    submit() {
      this.dialogVisible = false
      this.$confirm('确定要确认吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // const id = { id: this.multipleSelection[0].id }
          // removeProject(id).then(res => {
          //   if (res) {
          //     this.msgSuccess('删除成功!')
          //     // 重新加载表格数据
          //     this.getList()
          //   } else {
          //     this.msgError(res.message)
          //   }
          // })
        })
        .catch(() => {
          this.msgWarning('已取消')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
	.title{
		text-align: center;
		font-weight: bold;
		font-size:18px;
		/*border-bottom:solid 1px #ccc;*/
    line-height: 40px;
	}
  .cont{
    font-size:16px;
    padding-top: 10px;
  }
</style>
